<template>
	<view class="wp">
		<view class="ul-list">
			<view class="li" v-for="(it,index) in li">
				<navigator class="con" :url="'/pages/edu/list?id='+ it.id" hover-class="none">
					<view class="pic">
						<image style="width: 100%;" :src="it.pic" mode="widthFix"></image>
					</view>
					<view class="txt">
						<view class="tit">
							<h3>{{it.title}}</h3>
							<view class="desc">
								{{it.desc}}
							</view>
						</view>
						<view class="info">
							<view class="date">
								<text class="t1">共</text>
								<text class="t2">{{it.date}}</text>
								<text class="t1">节</text>
							</view>
							<view class="look">
								<text class="t2">{{it.look}}</text>
								<text class="t1">人学过</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="fooder">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				li:[
					{
						id:1,
						pic:"https://picsum.photos/id/1/200/180",
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:8,
						look:2532
					},
					{
						id:2,
						pic:'https://picsum.photos/id/2/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:12,
						look:4156
					},
					{
						id:3,
						pic:'https://picsum.photos/id/33/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:7,
						look:263
					},
					{
						id:4,
						pic:'https://picsum.photos/id/44/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:12,
						look:4156
					},
					{
						id:5,
						pic:'https://picsum.photos/id/55/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:12,
						look:2532
					},
					{
						id:6,
						pic:'https://picsum.photos/id/66/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:8,
						look:2532
					},
					{
						id:7,
						pic:'https://picsum.photos/id/77/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:12,
						look:4156
					},
					{
						id:8,
						pic:'https://picsum.photos/id/88/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:8,
						look:2532
					},
					{
						id:9,
						pic:'https://picsum.photos/id/9/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:8,
						look:2532
					},
					{
						id:10,
						pic:'https://picsum.photos/id/10/200/180',
						title:'特效入门课程',
						desc:'帮助您一周内学会特效基础操作，走向优秀特效师',
						date:8,
						look:2532
					}
				]
			}
		},
		onLoad(){
		    
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.wp{
		
	}
	.ul-list{
	}
	.ul-list .li{
		overflow: hidden;
		border-bottom: 1px solid #f6f6f6;
	}
	.ul-list .con{
		overflow: hidden;
		padding: 20rpx;
	}
	.ul-list .pic{
		float: left;
		width: 220rpx;
		height: 170rpx;
		overflow: hidden;
		border-radius: 8rpx;
		margin-right: 25rpx;
	}
	.ul-list .txt{
		overflow: hidden;
	}
	.ul-list h3{
		color: #1e2138;
		font-size: 30rpx;
		padding-top: 0rpx;
		margin-bottom: 10rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:1;
		
	}
	.ul-list .desc{
		color: #666666;
		font-size: 25rpx;
		height: 80rpx;
		line-height: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:2;
	}
	.ul-list .info{
		overflow: hidden;
		width: 100%;
		color: #ababab;
		font-size: 25rpx;
	}
	.ul-list .info .t2{
		color: #63d58a;
	}
	.ul-list .info .date{
		float: left;
	}
	.ul-list .info .look{
		float: right;
	}
	.fooder{
		height: 40rpx;
	}
</style>
